<template>
  <el-row class="IoSpeakingWriting-box">
    <el-col :span="24" class="IoSpeakingWriting-page">
      <div
        id="Ioread"
        class="linePage ScaleCSSViewport_unzoom"
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#021033"
      ></div>
    </el-col>
    <el-col :span="24" class="IoSpeakingWriting-file">
      <span class="LoadFile"
        >IO 读 ：{{ this.read ? this.read + " MB" : "0" + " MB" }}
      </span>
    </el-col>
  </el-row>
</template>>

<script>
import { SqlIoreadWrite } from "@/api/index.js";
import bus from "common/bus.js";
import { Line } from "@antv/g2plot";

export default {
  data() {
    return {
      selectedMonID: "",
      timerName: "MsSqlIoread",
      timerEventName: "MsSqltimerIoread",
      timerInterval: 1000 * 30,
      lineItem: "",
      lineData: [],
      read: "",
      loading: "",
    };
  },
  created() {
    bus.$on("selectedMonIDSqlServer", (msg) => {
      
      
      this.resetData();

      this.selectedMonID = msg;
      // this.postData.filters.monid = this.selectedMonID.selectedOSMonID;
      // this.getData();
      

       
        
          this.initGetData()
    });

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });
     bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {

                this.initGetData();
            }
        });
  },
  mounted() {
    this.initLine();
  },
  computed: {},
  methods: {
    initGetData() {
     
      // (this.loading = true),
      if(!this.selectedMonID){
        return
      }
        SqlIoreadWrite({ dbServername: this.selectedMonID.DBNAME,ip:this.selectedMonID.IP })
          .then((res) => {
            let sum = res.reduce((prev, cur) => {
              return parseInt(prev) + parseInt(cur.readdata);
            }, 0);
            this.read = parseInt(sum / res.length);
            this.lineData = res.map((item) => {
              return {
                Date: item.RecordTime,
                scales: parseInt(item.readdata),
              };
            });

            if (res.length == 0) {
              this.lineItem.update({ data: [] });
            } else {
              this.lineItem.changeData(this.lineData);
            }
          })
          .catch((_) => {})
          .finally((_) => {
            // this.loading = false;
          });
    },
    // getData() {
    //   (this.loading = true),
    //     SqlIoreadWrite({ dbServername: this.selectedMonID.DBNAME,ip:this.selectedMonID.IP })
    //       .then((res) => {
    //         let sum = res.reduce((prev, cur) => {
    //           return parseInt(prev) + parseInt(cur.readdata);
    //         }, 0);
    //         this.read = parseInt(sum / res.length);
    //         this.lineData = res.map((item) => {
    //           return {
    //             Date: item.RecordTime,
    //             scales: parseInt(item.readdata),
    //           };
    //         });
    //         if (res.length == 0) {
    //           this.lineItem.update({ data: [] });
    //         } else {
    //           this.lineItem.changeData(this.lineData);
    //         }
    //       })
    //       .catch((_) => {})
    //       .finally((_) => {
    //         this.loading = false;
    //       });
    // },

    resetData() {
      this.lineData = [];
      this.read="",
      this.lineItem.changeData(this.lineData);
    },
    initLine() {
      // console.log(this.lineData)
      this.lineItem = new Line("Ioread", {
        data: this.lineData,
        padding: "auto",
        xField: "Date",
        yField: "scales",
        height: 110 * this.ZOOM,
        // color: '#a8ddb5',
        // xAxis: {
        //   // type: 'timeCat',
        //   tickCount: 30,
        // },
        // padding:20,
        xAxis: false,
        // yAxis: {
        //   grid: {
        //     line: {
        //       style: {
        //         stroke: "rgb(29, 140, 248)",
        //         lineWidth: 1,
        //         lineDash: [1, 2],
        //         strokeOpacity: 0.7,
        //         // shadowColor: "rgb(29, 140, 248)",
        //         shadowBlur: 10,
        //         shadowOffsetX: 5,
        //         shadowOffsetY: 5,
        //         cursor: "pointer",
        //       },
        //     },
        //   },
        // },
        tooltip: {
          formatter: (datum) => {
            return { name: "大小", value: datum.scales + "MB" };
          },
        },
      });

      this.lineItem.render();
    },
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
    this.lineItem.destroy();
    bus.$off('selectedMonIDSqlServer')
  },
};
</script>
<style scoped>
.IoSpeakingWriting-box {
  height: 100%;
}
.IoSpeakingWriting-page {
  height: 72%;
  width: 100%;
}
.linePage {
  height: 100%;
  width: 100%;
}
.IoSpeakingWriting-file {
  height: 30%;
  width: 100%;
  text-align: center;
}
</style>